<template>
    <div class="tag-content">
        <el-popover placement="left" width="200" trigger="hover">
            <el-tag
                class="tag-one"
                v-for="(tag, index) in currentRow.tags"
                :key="index"
                size="medium"
                style="margin: 3px 5px"
                >{{ tag.name }}
                <i class="el-icon-close" style="font-size:16px" @click="handleClose(tag)" v-if="closable" v-permission="[`${closePermission}`]"></i></el-tag
            >
            <span class="tag-text" slot="reference">
                <span
                class="single"
                v-for="(tag, index) in currentRow.tags"
                :key="index"
                size="mini"
                >{{ tag.name }}</span
            >
            </span>
        </el-popover>
    </div>
</template>

<script>
import { equipment } from "@/api/factuer";
import { handleConfirm } from "@/utils/messageBox";
export default {
    props: {
        currentRow: {
            type: Object,
            default: () => {},
        },
        // 标签是否可关闭
        closable:{
            type:Boolean,
            default:false,
        },
        closePermission:{
            type:String,
            default:''
        },
    },
    data() {
        return {
            statusLoading: false,
        };
    },
    filters: {
        tagName(val) {
            if (val) {
                return val
                    .map((item) => {
                        return item.name;
                    })
                    .join(",");
            }
            return "";
        },
    },
    watch: {
        currentRow: {
            handler(val) {},
            deep: true,
            immediate: true,
        },
    },
    methods: {
        isCheckStatus() {
            this.statusLoading = true;
            equipment(`/detect/offline/${this.currentRow.id}`, "post")
                .then((res) => {
                    if (res.data == true) {
                        this.$message.success("在线状态已更新！");
                        this.$emit("updateStatus");
                    } else if (res.data == false) {
                        this.$message.warning("状态一致，无需更新！");
                    }
                })
                .finally(() => (this.statusLoading = false));
        },
        // 删除标签
        handleClose(tag) {
            handleConfirm(`确定要删除此标签吗？`, "warning", "提示")
                .then((res) => {
                    this.doDeleteTag(tag);
                })
                .catch((err) => {});
        },
        doDeleteTag(tag){
            equipment(`/tag/${this.currentRow.id}/${tag.id}`,'delete').then(res=>{
                if(res.code ==200){
                    this.$message.success(res.message);
                    this.$emit('updateList');
                }
            });
        },
    },
};
</script>

<style lang="scss">
@import "@/styles/common.scss";
.tag-content {
    @include flexLayout(center, center);
    .tag-text {
        @include exceedFlow(1);
    }
    .single{
        border: 1px solid #409EFF;
        border-radius: 3px;
        color: #409EFF;
        padding: 2px 4px;
        font-size: 12px;
        margin-right: 4px;
    }
    .tag-one{
        position: relative;
        ::v-deep .el-icon-close{
            position: absolute;
            right: 2px;
            top: 3px;
            cursor: pointer;
        }
    }
}
</style>
